<template>
    <!-- #ifdef MP-WEIXIN -->
    <view class="navbar-wrap" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <!-- #else -->
    <view class="navbar-wrap">
    <!-- #endif -->
        <view class="navbar-box">
            <!-- 左边 -->
            <view class="left" @click="go">
                <slot name="left"></slot>
                <!-- 使用方式 -->
                <!-- <template #left><i class="iconfont icon-zuojiantou"></i></template> -->
            </view>

            <!-- 中间 -->
            <view class="center">
                <slot></slot>
                <!-- 使用方式 -->
                <!-- <template #default>三叉戟商城</template> -->
            </view>

            <!-- 右边 -->
            <view class="right">
                <slot name="right"></slot>
                <!-- 使用方式 -->
                <!-- <template #right><i class="iconfont icon-shouye1"></i></template> -->
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
// 获取屏幕边界到安全区域的距离,不同的机型距离顶部的高度不同
const { safeAreaInsets } = uni.getSystemInfoSync()

const props = withDefaults(defineProps<{
    leftGotoPath?: string
}>(), {
    leftGotoPath: ''
})

// 跳转
const go = () => {
    if (props.leftGotoPath) {
        if (props.leftGotoPath == '/pages/index/index') {
            uni.switchTab({ url: props.leftGotoPath })
        } else {
            uni.navigateTo({ url: props.leftGotoPath })
        }
    } else {
        uni.navigateBack({ delta: 1 })
    }
}
</script>

<style scoped lang="scss">
.navbar-wrap {
    background-color: $uni-color-primary;
    .navbar-box {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        color: #fff;
        box-shadow: 0 4rpx 0rpx rgba(100, 100, 100, 0.1);
        padding: 0 22rpx;
        height: 80rpx;
        .left, .right {
            width: 120rpx;
        }

        // 中间区域开始
        .center {
            flex: 1;
            font-size: 24rpx;
            /* #ifdef MP-ALIPAY */
            font-size: 34rpx;
            font-weight: bold;
            /* #endif */
            /* #ifdef H5 */
            font-weight: bold;
            /* #endif */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: flex;
            justify-content: center;
        }
        // 中间区域结束

        // 右边区域开始
        .right {
            display: flex;
            justify-content: flex-end;
            /* #ifdef MP-WEIXIN */
            margin-right: 230rpx;
            /* #endif */
        }
    }
}
</style>
